import React, {Component} from 'react';
// import PropTypes from 'prop-types';

import './index.less'

export default class DragHeightCom extends Component {
    constructor(props) {
        super(props);
        this.mouseDown = false;
    }

    componentDidMount() {
        if (this.divDom) {
            this.clientHei = this.divDom.clientHeight;
            this.topHei = document.getElementById('scroll_container').offsetHeight
        }
        this.onMouseDown.call(this);
    }

    onMouseDown() {
        let that = this;
        document.addEventListener('mousemove', (e) => {
            //e.stopPropagation();
            if (that.mouseDown && that.divDom) {
                // fix bug  IE  e.x !== e.clientx  ie
                let hei = that.clientHei + (that.beginY - e.clientY);
                if (hei >= that.box.clientHeight - 20 || hei <= 50) {
                    that.divDom.style.height = that.divDom.clientHeight + 'px';
                } else {
                    that.divDom.style.height = hei + 'px';
                }
                console.log()
            }
        });
        /*document.documentElement.onmousemove = e => {
          // e.preventDefault();

        };*/

        this.spanDom.addEventListener('mouseup', (e) => {
            that.mouseDown = false;
            if (that.divDom) {
                that.clientHei = that.divDom.clientHeight;
            }
            that.maskTopDom && (that.maskTopDom.style.display = 'none');
            that.maskBottomDom && (that.maskBottomDom.style.display = 'none');
            typeof that.props.onDragStop === 'function' && that.props.onDragStop(that.clientHei);
        });
        /*document.documentElement.onmouseup = e => {

        };*/

        this.spanDom.addEventListener('mousedown', (e) => {
            that.beginY = e.clientY;
            that.mouseDown = true;
            if (that.divDom) {
                that.clientHei = that.divDom.clientHeight;
            }
            // 加个遮罩 应对  iframe的情况
            that.maskRightDom && (that.maskRightDom.style.display = 'block');
            that.maskLeftDom && (that.maskLeftDom.style.display = 'block');
        });
        /*this.spanDom.onmousedown = e => {

        };*/
    }

    render() {
        let bottomHei = this.props.defBottomHei || '150px';
        let bottomMinHei = this.props.bottomMinHei || '50px';
        return (
            <div
                className="dragHeightCom drag-top-bottom"
                ref={box => {
                    this.box = box;
                }}
            >
                <div className="dragHeightCom_top" id="scroll_container">
                    <div className="dragHeightCom_mask" ref={mask => {
                        this.maskTopDom = mask;
                    }}/>
                    {this.props.topDom}
                </div>

                <div
                    ref={span => {
                        this.spanDom = span;
                    }}
                    style={{display: this.props.isShowBottomDom ? 'block' : 'none'}}
                    className="dragHeightCom_line"
                >
                    <div className="dragHeightCom_lines"
                         style={{display: this.props.isShowBottomDom ? 'block' : 'none'}}/>
                </div>
                <div
                    className="dragHeightCom_bottom"
                    style={{
                        display: this.props.isShowBottomDom ? 'block' : 'none',
                        height: bottomHei,
                        minHeight: bottomMinHei
                    }}
                    ref={div => {
                        this.divDom = div;
                    }}
                >
                    <div className="dragHeightCom_mask" ref={mask => {
                        this.maskBottomDom = mask;
                    }}/>
                    {this.props.bottomDom}
                </div>
            </div>
        );
    }
}
